﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount">0</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- <li>
                <input type='checkbox'>
                <p>吃饭</p>
                <a href='javascript:;'></a>
            </li>
            <li>
                <input type='checkbox'>
                <p>打豆豆</p>
                <a href='javascript:;'></a>
            </li> -->
        </ol>
        <h2>已经完成 <span id="donecount">0</span></h2>
        <ul id="donelist">
            <!-- <li>
                <input type='checkbox' checked>
                <p>睡觉</p>
                <a href='javascript:;'></a>
            </li> -->
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>

    <script>
        // 任务列表
        let todolist = [
            // content 任务内容
            // done   任务是否已完成  true 已完成    false 正在进行中
            { content: "敲JS基础代码", done: true },
            { content: "敲webApis代码", done: true },
            { content: "敲JS进阶代码", done: false },
            { content: "练习Echarts图表代码", done: false },
            { content: "预习Ajax课程", done: false }
        ]
        const title=document.querySelector('#title')
        // 添加
        title.addEventListener('keydown',function(e){
              if(e.keyCode===13&&title.value!=''){
                 todolist.unshift({
                     content:title.value,
                     done:false
                 })
                 localStorage.setItem('todolist',JSON.stringify(todolist))
                 this.value=''
                 render()
              }
        })
      
        
        const  tdlist=document.querySelector('#todolist')
        const delist=document.querySelector('#donelist')
        //删除
        tdlist.addEventListener('click',function(e){
             if(e.target.tagName==='A'){
                 const str=e.target.previousElementSibling.innerHTML
                 todolist=todolist.filter(item=>item.content!==str)
                 localStorage.setItem('todolist',JSON.stringify(todolist))
                 render()
             }
        })
        delist.addEventListener('click',function(e){
             if(e.target.tagName==='A'){
                 const str=e.target.previousElementSibling.innerHTML
                 todolist=todolist.filter(item=>item.content!==str)
                 localStorage.setItem('todolist',JSON.stringify(todolist))
                 render()
             }
        })
        //切换进行和完成的状态
        tdlist.addEventListener('click',function(e){
           if(e.target.tagName==='INPUT'){
              const str=e.target.nextElementSibling.innerHTML
              todolist.forEach(item=>{
                    if(item.content===str){
                        item.done=true
                    }
              })
           }
           localStorage.setItem('todolist',JSON.stringify(todolist))
           render()
        })
        const data=localStorage.getItem('todolist')
            todolist=data?JSON.parse(data):todolist
        function render(){
           const arrTrue=todolist.filter(item=>item.done===true)
           const arrFalse=todolist.filter(item=>item.done===false)
           document.querySelector('#todocount').innerHTML=arrFalse.length
           document.querySelector('#donecount').innerHTML=arrTrue.length
           //渲染正在进行
           let str=''
           arrTrue.forEach((item,index)=>{
                  str+=`
                  <li>
                        <input type='checkbox' checked>
                        <p>${item.content}</p>
                        <a href='javascript:;'></a>
                </li>
             
                  `
           })
           delist.innerHTML=str
        //渲染已经完成
         let str2=''
         arrFalse.forEach((item,index)=>{
             str2+=`
             <li>
                <input type='checkbox'>
                <p>${item.content}</p>
                <a href='javascript:;'></a>
            </li>
             `
         })
         tdlist.innerHTML=str2
         
           
        }
        render()

        // 功能列表
        // 1. 渲染数据功能 (包含 统计任务数量)
        // 2. 回车发布功能（最新的在最上面）
        // 3. 删除操作
        // 4. 切换任务的完成状态
        // 5. 本地存储 与 读取本地存储的数据
        //     啥时候存（添加、删除、切换任务完成状态）

        // 技术要求
        //  1. 通过jQ语法来获取元素 + 注册事件 + 注册事件委托（on语法）
        //          不使用原生JS获取元素 和 注册事件
        //  2. 渲染数据功能，需要使用 map + join 配合实现功能
        //  3. 尽可能的使用ES6语法
        //          比如 箭头函数 、 对象属性和方法简写、数组常用方法（filter）


        // 功能1. 渲染数据功能 (包含 统计任务数量)
       

        // 功能2. 回车发布功能（最新的在最上面）
       

        // 功能3. 删除操作
        

        // 功能4. 切换任务的完成状态

    </script>
</body>

</html>